{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

      <!-- 新 Bootstrap4 核心 CSS 文件 --> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
    <!-- <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> --> 
    <script src="{% static 'jquery-3.5.1.min.js' %}"></script> 
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script> -->
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> 
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> 
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- jquery-plugin_dataTable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>

    <!-- <script src='https://cdn.datatables.net/fixedheader/3.1.8/js/dataTables.fixedHeader.min.js'></script> -->
<style>
#example {
  table-layout: fixed;
  width: 100% !important;
}
#example td,
#example th{
  width: auto !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
input::placeholder{
    color: green;
    opacity: 0.4;
    font-size: 50%;
}
</style>
<script>        

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
    var table = $('#example').DataTable( {
        ajax:{               
                        url: '/sonar-api/dataTable/',    
                        dataSrc: 'results'     
                    
        },                       
        columns:[             
                        {data: 'Profile_Name'},
                        {data: 'Freq_1'},
                        {data: 'Freq_2'},
                        {data: 'Freq_3'},
                        {data: 'Freq_4'},
                        {data: 'Freq_5'},
                        {data: 'TPK'},
                        {data: 'Blades'},
                    
        ],
        <!-- orderCellsTop: true, -->
        <!-- fixedHeader: true, -->
    } );
    <!-- $('#example').css('color', 'yellow'); -->
    <!-- $('#example').css('height', '100px'); -->
} );
</script>

</head>
<body> 
<div class='d-flex container-fluid justify-content-center'>
<div class='w-75 bg-danger'>
<table id="example" class="table" style="width:100%">
            <thead class='thead-dark'>
                <tr>
                    <th>Name</th>
                    <th>Freq_1</th>
                    <th>Freq_2</th>
                    <th>Freq_3</th>
                    <th>Freq_4</th>
                    <th>Freq_5</th>
                    <th>TPK</th>
                    <th>Blades</th>
                </tr>
            </thead>
            <!-- <tfoot> -->
            <!--     <tr> -->
            <!--         <th>Name</th> -->
            <!--         <th>Freq_1</th> -->
            <!--         <th>Freq_2</th> -->
            <!--         <th>Freq_3</th> -->
            <!--         <th>Freq_4</th> -->
            <!--         <th>Freq_5</th> -->
            <!--         <th>TPK</th> -->
            <!--         <th>Blades</th> -->
            <!--     </tr> -->
            <!-- </tfoot> -->
</table> 
               
</div>
</div>
</body>
</html>
